<template>
  <div class="f">
    <div class="k">
      <el-button class="l" @click="turn">返回</el-button>
    </div>
    <div class="box">
      <el-row :gutter="20">
        <el-col :span="6" offset="2">
          <el-card class="a">
            <el-row>
              <img src="~@/assets/dog.jpg" style="width: 150px;height: 200px" />
            </el-row>
            <el-row>
              <el-button type="primary">更改图片</el-button>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="13" offset="3">
          <el-form :model="talentData" label-width="80px" class="c">
            <el-form-item label="姓名">
              <el-input v-model="talentData.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="talentData.sex"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-input v-model="talentData.birthdate"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="talentData.phoneNum"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="d">
        <input type="button" class="e" value="确认修改" @click="turnback" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      talentData:
        {
          name: '小明',
          set: true,
          birthdate: '1991.2.3',
          phoneNum: '13532675892',
          basicSitu: [
          {
            date: '2019.06-2020.08',
            companyId: '110',
            companyName: 'ABC有限公司',
            pos: '前端工程师'
          }],
          leftSitu: '',
          honors: [
            {
              honorName: '年度最佳员工',
              honorTime: '2019年6月1日'
            },
            {
              honorName: '十佳青年',
              honorTime: '2020年9月25日'
            }
          ],
          punishMent: [
            {
              name: '严重迟到',
              date: '2019年6月1日'
            },
            {
              name: '延迟旷课',
              date: '2020年9月25日'
            }
          ]
        }
    }
  },
  methods: {
    turnback() {
      this.$router.push('/csData')
    },
    turn(){
      this.$router.push('/csData')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 40%;
  height: 60%;
  position: relative;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  background-color: aquamarine;
  border-width: 10px;
  border-radius: 20px;
}
.a {
  text-align: center;
  background: none;
  
}
.c {
  width: 300px;
  margin-top: 20px;
}
.d {
  text-align: center;
  position: relative;
  top: 20%;
}
.e {
  font-size: 25px;
  font-weight: 300;
  background-color: aqua;
  color: rgb(190, 16, 16);
  border-radius: 20px;
  border-color: #000000;
  cursor: pointer;
}
.e:hover {
  background-color:rgb(238, 238, 248);
  font-size: 35px;
}
.f {
  width: 100%;
  height: 100%;
  background-color: #faf5f5;
}
.k {
  position: relative;
  text-align: right;
}
.l {
  margin-top: 30px;
  margin-right: 50px;
  font-size: 18px;
  color: #8ec5fc;
  background: none;
  border-block-end-width: 5px;
}
</style>